<!--
 * @Author: Your Name you@example.com
 * @Date: 2023-05-12 19:42:29
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2023-05-19 04:57:49
 * @FilePath: \elder-admin\src\views\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div style="width: 100%;height: 100%;opacity: 0.8;background:url('https://ts1.cn.mm.bing.net/th/id/R-C.e0ba6e6476de1e393ca7f5f27ff8a8e5?rik=KKLRrhVSmzDvYg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fphotoblog%2f1206%2f05%2fc12%2f11888793_11888793_1338903671082.jpg&ehk=29GsIAqtiTbeEqwiNNZtE3gDLS%2bjMREJkauiASCK1g4%3d&risl=&pid=ImgRaw&r=0');background-size: 100%,100%;">
        <div class="logBg" style="width: 30%;margin-left: 35%;margin-top: 200px;text-align: center">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style=";margin-top: 10px;margin-left: -40px;">
            <h3 style="margin-left: 40px;margin-top: -10px;">老年管理系统</h3>
            <el-form-item label="用户名" prop="id">
                <el-input v-model="id"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 70px;">
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button>
                    <router-link to="/updatePassword">修改密码</router-link>
                </el-button>
            </el-form-item>
        </el-form>
        </div>
    </div>
</template>
 
<script setup>
import {ref} from 'vue'
const id=ref()
const pass = ref()
const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (ruleForm.checkPass !== '') {
                        ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
const ruleForm =  {
                    id: '',
                    pass: ''
           }
const rules = {
            pass: [
                { validator: validatePass, trigger: 'blur' }
            ]
        }
const  submitForm=()=>{
                var axios = require('axios');
                var data = {
                    'password': pass.value,
                    'username': id.value
                }
                var config = {
                                method: 'post',
                                url: '/fapi/api/common/login',
                                headers: { 
                                    'Content-Type': 'application/json',
                                },
                                data :data
                            }
                            console.log(data)
                axios(config)
                .then(function (response) {
                console.log(response.data.token.token);
                localStorage.setItem('token',response.data.token.token)
                console.log("token:",localStorage.getItem("token"))
                window.location.href="http://localhost:9999/#/admin"
                })
                .catch(function (error) {
                console.log(error);
                });
            }
</script>
 
<style scoped lang="scss">
.logBg{
    background-color:rgb(182, 209, 228);
    padding: 20px;
    border-radius: 10px;
}
</style>